<template>
  <div
    class="element-library-icon-button"
    :property="$attrs"
    :class="{'button-disable':disable,'element-library-hover':!disable,'active':active}"
    @click="clickEventHandler">
    <p class="icon-btn" :class="[icon]"></p>
  </div>
</template>

<script>
  export default {
    name: "ElementLibraryIconButton",
    props: {
      icon: {
        default: "",
        type: String
      },
      active: {
        type: Boolean,
        default: false,
      },
      disable: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
    },
    methods: {
      clickEventHandler() {
        if (this.disable) return;
        this.$emit("click");
      }
    }
  }
</script>

<style scoped>
  .dark .button-disable {
    color: #999999;
  }

  .button-disable {
    color: #cccccc;
    cursor: not-allowed;
  }

  .element-library-icon-button {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 32px;
    width: 32px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: var(--bg-color1);
    padding: 0.25rem;
  }

  .element-library-hover {
    cursor: pointer;
  }

  .element-library-hover:hover {
    background-color: var(--bg-color3);
  }

  .active {
    background-color: var(--bg-color3);
  }

  .icon-btn {
    font-size: 20px;
  }
</style>